﻿(function($){

    var WidgetPropPanel = Backbone.Model.extend({
        defaults: {
            widthWidget: '',
            heightWidget: '',
            positTopWidget: '',
            positLeftWidget: ''
        },

        initialize: function() {
            //alert('проверка модели');
            //alert('ширина: ' + widthTxtWidget + 'px высота: ' + heightTxtWidget + 'px; Отступ сверху: ' + positionTxtWidget.top + 'px; отступ слева:' + positionTxtWidget.left);
        }
    });

    //var widgetPropPanel = new WidgetPropPanel();

	var PageWidgets = Backbone.View.extend({
		el: $('body'), 
		events: {
		  'click button#addTW': 'addTxtWidget'
		},
		
		initialize: function(){
		  _.bindAll(this, 'render', 'addTxtWidget');

		  this.counter = 0; 
		  this.render();
		},
		
		render: function(){
		  $(this.el).append("<button id='addTW' class='btn-control-panel'>Text Widget</button>");
		  $(this.el).append('<div id="wrapper"><div id="content" class="container_12"><div class="grid_12" id="page-area"></div><div class="clear"></div></div></div>');
		},
		
		addTxtWidget: function(){
		  this.counter++;
          var widthTxtWidget = 0;
          var heightTxtWidget = 0;
          var positionTxtWidget = 0;
		  $('div #page-area', this.el).append('<div class="txt-widget" id="txtWidgetDiv' +this.counter+ '"><textarea id="txtWidgetTxtArea' +this.counter+ '">' + 'id=' +this.counter+ '  Шурикс, щелкни по мне' + '</textarea></div>');
		  $('div #txtWidgetDiv' +this.counter, this.el).draggable({ containment: "#page-area", scroll: false }, { grid: [ 25,25 ] }).resizable({grid: 25}).click(function(){
              widthTxtWidget = $(this).width();
              heightTxtWidget = $(this).height();
              positionTxtWidget = $(this).position();
              alert('ширина: ' + widthTxtWidget + 'px высота: ' + heightTxtWidget + 'px; Отступ сверху: ' + positionTxtWidget.top + 'px; отступ слева:' + positionTxtWidget.left);
              //var widgetPropPanel = new WidgetPropPanel();
          }).append('<div class="txt-widget-properties" id="txtWidgetPropert' +this.counter+ '"></div>');
		}
	});
	
	var pageWidgets = new PageWidgets();
  
})(jQuery);